<template>
  <div class="app-container">
    <!-- tab -->
    <div class="">
      <div style="margin-bottom: 10px;">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="16">
            <div class="left-panel">
              <el-button type="text" icon=""></el-button>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="resetting"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead"
                      :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 订单列表 -->
      <el-row :gutter="20">
        <el-col class="">
          <el-table ref="tablerefs" v-loading="loading" highlight-current-row :data="tableData" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="500">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label" :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'status'">
                  <span style="margin: 0 3px;color: #f86d60;" v-if="scope.row.status == 1">未支付</span>
                  <span v-else style="margin: 0 3px;color:#13ce66;">已支付</span>
                </div>
                <div v-else-if="fruit == 'user_nickname'">
                  <span style="color: #0076f6;" >{{scope.row.user_nickname}}</span>
                </div>
                <div v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="120" prop="address" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="detailsDialogway(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="query.page" :page-sizes="[10, 20, 30, 40]" :page-size="query.count"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <!--  -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="60%" :withHeader="false"
      :visible.sync="detaildialog" @close="addressClose" :show-close="true">
      <div style="position: relative" v-loading="detailLoading">
        <div class="drawerTitle">
          <span>订单信息</span>
          <div class="close" @click="addressClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
        <div class="drawerContent" style="padding: 15px 30px;">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">订单状态</div>
              </div>
              <div class="right">

              </div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="订单状态">
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 2 : false" type="warning">待发货</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 3 : false" type="warning">待收货</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 5 : false" type="success">交易完成</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 1 : false" type="success">待支付</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 4 : false" type="success">售后</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 6 : false" type="success">已完成</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 9 : false" type="success">已取消</div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">商品信息</div>
              </div>
              <div class="right"></div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商">
                  {{
                    detailsObj.supplier_name ? detailsObj.supplier_name : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商ID">
                  {{
                    detailsObj.supplier_id ? detailsObj.supplier_id : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品名称">
                  <el-tooltip
                    placement="top-start"
                    :content="detailsObj.goods_name"
                  >
                    <div class="one_line_hidden">
                      {{ detailsObj.goods_name ? detailsObj.goods_name : "-" }}
                    </div>
                  </el-tooltip>
                  </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品ID">
                  {{
                    detailsObj.goods_id
                      ? detailsObj.goods_id
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品图片">
                  <div style="width: 40px; height: 40px">
                    <el-image :src="
                        detailsObj.goods_main_image
                          ? detailsObj.goods_main_image
                          : '-'
                      " :preview-src-list="[
                        detailsObj.goods_main_image
                          ? detailsObj.goods_main_image
                          : '-',
                      ]" />
                  </div>
                </el-descriptions-item>

                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格单位">
                  {{
                    detailsObj.product_unit
                      ? detailsObj.product_unit
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格零售">
                  {{
                    detailsObj.product_retail_price
                      ? detailsObj.product_retail_price
                      : "-"
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">订单信息</div>
              </div>
              <div class="right"></div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="支付时间">
                  {{
                    detailsObj.pay_time ? detailsObj.pay_time : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="购买数量">
                  {{
                    detailsObj.buy_number ? detailsObj.buy_number : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="余额单价">
                  {{ detailsObj.price_unit ? detailsObj.price_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总余额">
                  <span style="color: #1890ff;">
                    {{ detailsObj.pay_total ? detailsObj.pay_total : "-" }}
                  </span>
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="积分单价">

                  {{ detailsObj.points_unit ? detailsObj.points_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总积分">
                  <span style="color: #1890ff;">{{ detailsObj.points_total ? detailsObj.points_total : "-" }}</span>

                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="提货券单价">

                  {{ detailsObj.coupon_unit ? detailsObj.coupon_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总提货券">
                  <span style="color: #1890ff;">
                    {{ detailsObj.coupon_total ? detailsObj.coupon_total : "-" }}
                  </span>

                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总运费">

                  {{ detailsObj.freight_total ? detailsObj.freight_total : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总优惠折扣">

                  {{ detailsObj.discount_total ? detailsObj.discount_total : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="订单流水号">
                  {{
                    detailsObj.trade_no ? detailsObj.trade_no : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="收货人">
                  {{
                    detailsObj.addr_recipient
                      ? detailsObj.addr_recipient
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="收货人电话">
                  {{
                    detailsObj.addr_phone_number
                      ? detailsObj.addr_phone_number
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="省市区">
                  {{
                    detailsObj.addr_province_name
                      ? detailsObj.addr_province_name
                      : "-"
                  }}
                  {{
                    detailsObj.addr_city_name
                      ? detailsObj.addr_city_name
                      : "-"
                  }}
                  {{
                    detailsObj.addr_district_name
                      ? detailsObj.addr_district_name
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="详细地址">
                  {{
                    detailsObj.addr_address_details
                      ? detailsObj.addr_address_details
                      : "-"
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
    getOrderList,
  } from "@/api/order/index";
  const tableTheadOption = {
    trade_no: {
      label: "关联订单号",
      field: "trade_no",
      width: 200,
    },
    buy_number: {
      label: "销售数量",
      field: "buy_number",
      width: 90,
    },
    created_at: {
      label: "下单时间",
      field: "created_at",
    },
    pay_time: {
      label: "支付时间",
      field: "pay_time",
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
    },
    user_nickname: {
      label: "用户名称",
      field: "user_nickname",
    },
    pay_total:{
      label: "销售金额",
      field: "pay_total",
    },
    status: {
      label: "支付状态",
      field: "status",
    },
    addr_recipient: {
      label: "收货人",
      field: "addr_recipient",
      width: 90,
    },
    addr_phone_number: {
      label: "收货人电话",
      field: "addr_phone_number",
    },
    addr_province_name: {
      label: "收货地区",
      field: "addr_province_name",
    },
    addr_address_details: {
      label: "收货人详细地址",
      field: "addr_address_details",
    },
  };
  const allTableThead = [

    "trade_no",
    "buy_number",
    "created_at",
    "pay_time",
    "goods_name",
    "pay_total",
    "user_nickname",
    "addr_recipient",
    "addr_phone_number",
    "addr_province_name",
    "addr_address_details",
  ];
  const defaultTableThead = [
    "goods_name",
    "buy_number",
    "pay_total",
    "user_nickname",
    "trade_no",
    "status",
    "created_at"
  ];
  export default {
    name: "merchantPay",
    components: {

    },
    data() {
      return {
        id: "",
        loading: true,
        currentPage4: 1, //页码
        total: 0,
        query: {
          goods_id: "",
          pageSize: 10,
          page: 1,
        },
        tableData: [], //列表
        tableKey: 1, // table key
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        detailLoading: false,
        detaildialog:false,
        detailsObj:{}
      };
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
        this.$nextTick(() => {
          this.$refs.tablerefs.doLayout();
        });
      },
    },
    mounted() {},
    methods: {
      addressClose() {
        this.detaildialog = false;
      },
      detailsDialogway(row) {
        this.detaildialog = true;
        this.detailLoading = false;
        this.detailsObj = JSON.parse(JSON.stringify(row));
        },
      //重置
      resetting() {
        this.getlist(this.query.goods_id);
      },
      //产品列表
      getlist(id) {
        this.loading = true;
        this.query.goods_id = id
        getOrderList(this.query).then((res) => {
          this.loading = false;
          this.currentPage4 = res.data.currentPage;
          this.total = res.data.total;
          this.tableData = res.data.list;
        });
      },
      //页码
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getlist(this.query.goods_id);
      },
      handleCurrentChange(val) {
        this.query.page = val
        this.getlist(this.query.goods_id);
      },
    },
  };
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
  .el-divider--horizontal {
    margin: 10px 0 !important;
  }
  .search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;
    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
    }
    .el-input {
      width: 180px;
    }
  }
</style>
